/*
 * @Author: miteng 973203639@qq.com
 * @Date: 2023-12-21 09:19:21
 * @LastEditors: miteng 973203639@qq.com
 * @LastEditTime: 2024-07-30 15:49:26
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
 */
import { ref } from 'vue';

// 定义chart和sidebarElm的引用类型
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type ChartRef = Ref<any>; // 这里假设chart是一个具有resize方法的对象，但具体类型取决于你的库
type SidebarElmRef = Ref<Element | null>;

// 定义事件处理函数的类型
type ChartResizeHandler = () => void;
type SidebarResizeHandler = (e: TransitionEvent) => void;

// 定义init和destroy函数类型
type InitResizeEventHandler = () => void;
type DestroyResizeEventHandler = () => void;
type InitSidebarResizeEventHandler = () => void;
type DestroySidebarResizeEventHandler = () => void;

// 定义生命周期钩子类型
type LifecycleHook = () => void;

// 定义返回对象的类型
interface ResizeHandlerReturn {
  chart: ChartRef;
  mounted: LifecycleHook;
  beforeDestroy: LifecycleHook;
  activated: LifecycleHook;
  deactivated: LifecycleHook;
}
// 定义你的函数类型
type ResizeHandlerFunction = () => ResizeHandlerReturn;

// 实现你的函数并为其添加类型注解
export default function useResizeHandler(): ResizeHandlerFunction {
  // export default function (): ResizeHandlerFunction {
  const chart: ChartRef = ref();
  const sidebarElm: SidebarElmRef = ref<Element | null>(null);
  const chartResizeHandler: ChartResizeHandler = (): void => {
    if (chart.value) {
      chart.value.resize();
    }
  };

  const sidebarResizeHandler: SidebarResizeHandler = (e: TransitionEvent): void => {
    if (e.propertyName === 'width') {
      chartResizeHandler();
    }
  };

  const initResizeEvent: InitResizeEventHandler = (): void => {
    window.addEventListener('resize', chartResizeHandler, { passive: true });
  };

  const destroyResizeEvent: DestroyResizeEventHandler = (): void => {
    window.removeEventListener('resize', chartResizeHandler);
  };

  const initSidebarResizeEvent: InitSidebarResizeEventHandler = (): void => {
    sidebarElm.value = document.getElementsByClassName('sidebar-container')[0];
    if (sidebarElm.value) {
      sidebarElm.value.addEventListener(
        'transitionend',
        sidebarResizeHandler as EventListener,
        { passive: true }
      );
    }
  };

  const destroySidebarResizeEvent: DestroySidebarResizeEventHandler = (): void => {
    if (sidebarElm.value) {
      sidebarElm.value.removeEventListener(
        'transitionend',
        sidebarResizeHandler as EventListener
      );
    }
  };

  // 定义生命周期钩子
  const mounted: LifecycleHook = (): void => {
    initResizeEvent();
    initSidebarResizeEvent();
  };

  const beforeDestroy: LifecycleHook = (): void => {
    destroyResizeEvent();
    destroySidebarResizeEvent();
  };

  const activated: LifecycleHook = mounted; // 假设在激活时执行与挂载时相同的操作
  const deactivated: LifecycleHook = beforeDestroy; // 假设在停用时执行与销毁前相同的操作

  // 返回符合ResizeHandlerReturn接口的对象
  return (): ResizeHandlerReturn => ({
    chart,
    mounted,
    beforeDestroy,
    activated,
    deactivated,
  });
}
